<template>
  <view>
    <Navbar></Navbar>
    <view class="u-m-20 u-m-t-30">
      <view class="u-flex u-row-between">
        <view class="u-flex">
          <view class="u-flex" @click="dateShow = true">
            <view class="u-m-r-10">{{ date }}</view>
            <u-icon name="arrow-down-fill"></u-icon>
          </view>
          <view v-if="type == 3" class="u-flex u-m-l-30" @click="hanldeShowIndustry">
            <view class="u-m-r-10">筛选分店</view>
            <u-icon name="arrow-down-fill"></u-icon>
          </view>
        </view>
        <view class="u-font-34 u-font-bold">{{ type == 1 ? '收入' : '业绩' }}：{{ total }}元</view>
      </view>
      <view class="u-m-t-20" v-for="item in list" :key="item.id">
        <view class="u-flex u-row-between" v-if="type == 1">
          <view class="u-flex-1">{{ item.remark }}</view>
          <view class="u-m-l-20">{{ item.price || 0 }}元</view>
        </view>
        <view class="u-form-box u-p-20" v-else>
          <view class="shopName">{{ item.xd_shop_name }}</view>
          <view class="u-flex u-row-between">
            <view>{{ item.xd_name }}{{ item.b_type_name }}</view>
            <view class="u-m-l-20">{{ item.price || 0 }}元</view>
          </view>
          <view class="u-m-t-10 u-flex u-row-between">
            <view>推荐人：{{ item.tj_name }}</view>
            <view class="u-m-l-20">{{ item.xd_create_time }}</view>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 100rpx;"></view>
    <Loadmore :status="status"></Loadmore>
    <Bottom :isReturn="true"></Bottom>


    <!-- 行业 -->
    <performancePopup :is_center="type" :showIndustry="industryShow" :classAIndustryObj="classAIndustryObj"
      :classBIndustryList="classBIndustryList" :classAIndustryList="classAIndustryList" :column="true"
      @checkA="handleCheckClassA" @closes="handleClosePopup" :aloneId="aloneId"></performancePopup>

    <!-- 日期 -->
    <u-calendar ref="calendar" v-model="dateShow" mode="range" active-bg-color="#B3723E" range-bg-color="#F615"
      range-color="#fff" btn-type="warning" @change="onChooseDate">
      <view slot="tooltip">
        <view class="timeBtn" @click="onClear">重置</view>
      </view>
    </u-calendar>
  </view>
</template>

<script>
import performancePopup from '@/components/performancePopup.vue'
import Navbar from "@/components/Navbar.vue";
import Bottom from "@/components/Bottom.vue";
import Loadmore from '@/components/Loadmore.vue'
import reachBottom from '@/mixins/reachBottom.js'
import { teaPerformanceList } from '@/network/tea.js'
import {
  getClassAIndustry,
  getClassBIndustry,
  getYeji
} from '@/network/api.js'
export default {
  mixins: [reachBottom],
  components: {
    Navbar,
    Bottom,
    Loadmore,
    performancePopup
  },
  data() {
    return {
      date: '时间筛选',
      dateShow: false,
      startTime: '',
      endTime: '',
      list: [],
      total: 0,
      type: 0, // 1 青创分汇  2 合伙人 
      industryShow: false,
      classAIndustryList: [],
      classAIndustryObj: "",
      classBIndustryList: [],
      checkClassAId: "",
      aloneId: "",
    }
  },
  onLoad(options) {
    this.type = options.type
    let now = new Date()
    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
    // this.startTime = `${lastMonth.getFullYear()}-${(lastMonth.getMonth() + 1).toString().padStart(2, '0')}-01 00:00:00`
    const nowMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
    // this.endTime = `${nowMonth.getFullYear()}-${(nowMonth.getMonth() + 1).toString().padStart(2, '0')}-${nowMonth.getDate().toString().padStart(2, '0')} 23:59:59`
    this.onGetList()


    // this.handleGetFirseIndustry()
  },
  methods: {
    handleClosePopup(value) {
      this.industryShow = false
      console.log(value);
      this.checkClassAId = value.firstIndustryId
      this.aloneId = value.id
      this.page = 1
      this.list = []
      this.onGetList()
    },
    hanldeShowIndustry() {
      this.classAIndustryList.map(res => {
        if (res.industry_id == this.checkClassAId) {
          this.classBIndustryList = res.list
        }
      })
      this.classAIndustryObj = []
      this.classAIndustryObj = this.classAIndustryList[0]
      this.industryShow = true
    },
    handleGetFirseIndustry() {
      /* 获取一级行业 */
      getClassAIndustry().then(res => {
        this.classAIndustryList = res.data
        this.classAIndustryObj = res.data[0]
        this.handleGetClassB(res.data[0].industry_id)
      })
    },
    handleCheckClassA(id) {
      /* 获取二级行业 */
      // this.handleGetClassB(id)
      this.classBIndustryList = []
      this.classAIndustryList.map(res => {
        if (res.industry_id == id) {
          this.classBIndustryList = res.list
        }
      })

    },
    handleGetClassB(id) {
      /* 行业确认选择 */
      getClassBIndustry({
        pid: id
      }).then(res => {
        this.classBIndustryList = res.data
      })
    },

    async onGetList() {
      const params = {
        user_id: uni.getStorageSync("user_id"),
        is_center: this.type,
        page: this.page,
        limit: 20,
        start_time: this.startTime,
        end_time: this.endTime,
        industry_id: this.checkClassAId,
        alone_user_id: this.aloneId == -1 ? '' : this.aloneId,
      }
      const res = await getYeji(params)
      this.total = res.data.sum_price
      this.count = res.data.count
      this.classAIndustryList = res.data.left
      this.classBIndustryList = [...res.data.left[0].list]
      this.classAIndustryObj = res.data.left[0]


      res.data.center.map(item => this.list.push(item))
      if (this.list.length == this.count) {
        this.status = 'nomore'
      }
    },
    onChooseDate(val) {
      this.startTime = `${val.startDate} 00:00:00`
      this.endTime = `${val.endDate} 23:59:59`
      // this.date = `${val.startDate}至${val.endDate}`
      this.page = 1
      this.list = []
      this.onGetList()
    },
    loadData() {
      if (this.status == 'nomore') return
      this.page++
      this.status = 'loadmore'
      this.onGetList()
    },
    onClear() {
      this.startTime = ''
      this.endTime = ''
      this.date = '时间筛选'
      this.page = 1
      this.list = []
      this.dateShow = false
      this.$refs.calendar.init()
      this.onGetList()
    }

  }
}
</script>

<style>
.u-btn--warning {
  background-color: #B3723E !important;
  border-color: #B3723E !important;
}

.timeBtn {
  width: 130rpx;
  border-radius: 50px;
  text-align: center;
  margin: 30rpx 10rpx 0;
}

.shopName {
  background-color: #1da29a;
  color: #fff;
  padding: 5rpx 20rpx;
  border-radius: 10rpx;
  display: inline-block;
  font-size: 24rpx;
  margin-bottom: 10rpx;
}
</style>